<template>
<view class="container">
	<view class="avatar">
	    <image :src="avatar"></image>
	</view>
	<view class="remark"><text class="red">*</text>号为必填项</view>
	<view class="view_input1">
	    <view class="view_input_title2">机构名称:</view>
		<input class="view_input_input1" type="text"
		@input="bindInput" data-name="name" :value="form.name"
		placeholder-class="placeholderClass" placeholder="请输入机构名称"/>
		<text class="red">*</text>
	</view>
	<view class="view_input1">
	    <view class="view_input_title2">联系人:</view>
		<input class="view_input_input1" type="text" 
		@input="bindInput" data-name="contacts" :value="form.contacts"
		placeholder-class="placeholderClass" placeholder="请输入联系人"/>
		<text class="red">*</text>
	</view>
	
	<view class="view_input1">
	    <view class="view_input_title2">电话/微信:</view>
		<input class="view_input_input1" type="text"
		@input="bindInput" data-name="phone" :value="form.phone"
		placeholder-class="placeholderClass" placeholder="请输入电话"/>
		<text class="red">*</text>
	</view>
	
	<view class="view_input1">
	    <view class="view_input_title2">招聘岗位:</view>
		<input class="view_input_input1" type="text" style="width:50%;" @click="jump('job')"
		:value="form.job ? form.job : '请选择'" disabled/>
		<image @click="jump('job')" style="width:35rpx;height:35rpx;" src="/static/img/right.png"></image>
	</view>
	
	<view class="view_input1">
	    <view class="view_input_title2">招聘人数:</view>
		<input class="view_input_input1" type="number"
		@input="bindInput" data-name="num" :value="form.num"
		placeholder-class="placeholderClass" placeholder="请输入招聘人数"/>
		<text class="red">*</text>
	</view>
	
	<view class="view_input1">
	    <view class="view_input_title2">薪资待遇:</view>
		<picker @change="bindInput" :value="form.money" :range="money"
		data-name="money"
		class="view_input_input1">
			<view>{{form.money ? money[form.money] : '请选择'}}</view>
		</picker>
		<text class="red">*</text>
	</view>
	
	<view class="view_input1">
	    <view class="view_input_title2">工作城市:</view>
		<input class="view_input_input1" type="text" style="width:50%;" @click="jump('city')"
		:value="form.city ? form.city : '请选择'" disabled/>
		<image @click="jump('city')" style="width:35rpx;height:35rpx;" src="/static/img/right.png"></image>
	</view>
	
	<view class="view_else1">
		<view class="view_input_title2">岗位描述:</view>
		<view class="view_example" @click="exampleShow">模板</view>
	</view>
	<view class="view_textarea">
		<textarea auto-height maxlength="-1" placeholder="岗位描述"
		@input="bindInput" data-name="remark" :value="form.remark"/>
	</view>
	
	<view class="view_input1">
	    <view class="view_input_title2">具体地址:</view>
		<input class="view_input_input1" type="number"
		@input="bindInput" data-name="address" :value="form.address"
		placeholder-class="placeholderClass" placeholder="请输入具体地址"/>
		<text class="red">*</text>
	</view>
	
	<view class="view_else">
		<view class="view_input_title2">营业执照:</view>
	</view>
	<view class="view_img">
		<image class="uploadImg" v-if="form.license" @click="upLoad('license')" :src="imgUrl + form.license"></image>
		<image class="uploadImg" v-else @click="upLoad('license')" :src="pubImg"></image>
	</view>
	
	<view class="view_else">
		<view class="view_input_title2">机构配图:</view>
	</view>
	<view class="view_img">
		<view class="imgContent" v-if="form.imgs.length > 0" v-for="(item,index) in form.imgs" :key="index">
			<image class="imgItem" :src="imgUrl + item"></image>
			<view class="delete" @click="imgDel(index)">删除</view>
		</view>
		<image class="uploadImg imgs" v-if="uploadShow" @click="upLoad('imgs')" :src="pubImg"></image>
	</view>
	<view class="ruleclass">
	  <checkbox-group  @change="bindRule">
	    <label>
	      <checkbox value="同意" color="#FFA200"/>
		  <text>我已经阅读并接受</text>
		  <text class="rule-text" @click="jumpRule">《会员规则协议》</text>
	    </label>
	  </checkbox-group>
	  <view class="jumpRule" @click="jumpRule">点击查看会员协议</view>
	</view>
	<view style="height:120rpx;"></view>
	<companyRule v-if="ruleShow" @func="ruleBack"></companyRule>
	<button v-if="submittrue"  @click="companyAdd" class="buttonClass">提交</button>
</view>
</template>

<script>
import request from '@/util/request.js'
import companyRule from "@/components/companyRule.vue"
export default {
	data() {
		return {
			imgUrl:this.url,
			pubImg:'/static/img/pub.png',
			avatar:uni.getStorageSync('avatarUrl'),
			form:{
				imgs:[],
				license:''
			},
			moneyIndex:0,
			money:['面议','5k以下','5k~8k','8k~10k','10k以上'],
			example:'岗位描述',
			submittrue:true,
			ruleShow:false,
			uploadShow:true,
			userTrue:false
		}
	},
	components:{companyRule},
	onShow:function(){
		if(uni.getStorageSync('role') !== 1){
			uni.switchTab({
				url:'/pages/index/index'
			});
			return;
		}
		if(uni.getStorageSync('cForm')){
			this.form = uni.getStorageSync('cForm')
		}
	},
	methods: {
		bindInput:function(e){
			let name = e.currentTarget.dataset.name
			this.form[name] = e.detail.value
			uni.setStorageSync('cForm',this.form)
			this.$forceUpdate();
		},
		jump:function(key){
			if(key == 'city'){
				var url = '/pages/city/index'
			}
			if(key == 'job'){
				var url = '/pages/login/post/index?post='+this.form.job
			}
			uni.navigateTo({
				url:url
			});
		},
		companyAdd:function(){
			if(!this.userTrue){
				uni.showToast({
					title: '请同意用户协议!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			this.form.uid = uni.getStorageSync('uid')
			var array = {
				'name':'机构名称必填',
				'contacts':'联系人必填',
				'phone':'联系电话必填',
				'job':'招聘岗位必填',
				'num':'招聘人数必填',
				'address':'地址必填',
				'city':'工作城市必填'
				//'license':'营业执照必须上传',
				//'imgs':'店铺照片必须上传',
			  }
			for(var x in array){
			    if(!this.form[x]){
			        uni.showToast({
			        	title:array[x],
			        	icon: "none", 
			        	position:'bottom',
			        });
			        return;
			    }
			}
			this.submittrue = false
			//调接口 提交
			var that = this
			request({
				url: 'user/companyAdd',
				method: 'post',
				data:this.form,
				success: (res) => {
					if(res.data.code == 1){
						uni.setStorageSync('role',3)
						//注册完成  清楚缓存
						uni.removeStorageSync('cForm')
						if(res.data.data.status == 2){
							//被拒绝
							var message = '申请已拒绝,如有疑问请联系客服!!'
						}else{
							var message = '自动审核已通过!!'
						}
					}else{
						var message = res.data.msg
					}
					uni.showToast({
						title:message,
						icon: 'none',
						duration: 2000,
						success() {
							setTimeout(function() {
								uni.switchTab({
									url:'/pages/index/index'
								});
							}, 2000);
						}
					})
				}
			})
		},
		bindAcceptRule:function(e){
			if (e.detail.value.length !== 0) {
				this.userTrue = true
			}else{
				this.userTrue = false
			}
		},
		exampleShow:function(){
			this.example = '岗位要求 1、年龄18—30周岁，形象好，气质佳，身心健康；2、中专以上学历。3、相关设备熟练操作，技术手法标准；4、具有亲和力、沟通能理，具备服务意思与团队精神，有上进心；5、参加过相关职业培训可优先考虑。'
			this.form.remark = this.example
			uni.setStorageSync('cForm',this.form)
			this.$forceUpdate();
		},
		upLoad:function(name){
			var token = 'tymy';
			var that = this
			uni.chooseImage({
				count: 1,
				sizeType:['copressed'],
				success(res){
					uni.showLoading({
					    title: '上传中'
					});
					//因为有一张图片， 输出下标[0]， 直接输出地址
					var imgFiles = res.tempFilePaths[0]
					var uper = uni.uploadFile({
						// 需要上传的地址
						url:that.imgUrl+'/api/app/upload',
						// filePath  需要上传的文件
						filePath: imgFiles,
						name:'img',
						header: {
						    // "Content-Type": "multipart/form-data",
						    // 'accept': 'application/json',  //若有token，此处换上你的token，没有的话省略
							'Authorization' : 'Bearer' + token
						},
						formData:{
							//name:'img'
						},
						success(res1) {
							uni.hideLoading();
							// 显示上传信息
							if(name == 'license'){
								that.form.license = res1.data
							}else{
								if(!that.form.imgs){
									that.form.imgs = []
								}
								if(that.form.imgs.length >= 5){
									that.uploadShow = false
								}
								that.form.imgs.push(res1.data)
							}
							that.$forceUpdate();
							uni.setStorageSync('cForm',that.form)
						}
					});
				}
			})
		},
		imgDel:function(index){
			this.form.imgs.splice(index,1)
			this.uploadShow = true
			uni.setStorageSync('cForm',this.form)
		},
		jumpRule:function(){
			this.ruleShow = true
		},
		ruleBack:function(data){
			this.ruleShow = data
		},
		bindRule:function(e){
			if (e.detail.value.length !== 0) {
				this.userTrue = true
			}else{
				this.userTrue = false
			}
		},
	}
}
</script>

<style>
.avatar{
	background: #ff861a;
	width:100%;
	height:100px;
	display: flex;
	justify-content:center;
}
.avatar image{
	width:80px;height:80px;
	border-radius: 50%;margin-top:10px;
}
.red{color:red;}
.remark{
	width:100%;
	display: flex;
    justify-content: center;
	height:50rpx;
	line-height: 50rpx;
	font-size:14px;
}
.view_input_radio1{
	display: flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
	width:65%;
}
.view_input_radio1 label{
	display: flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
}
.view_else{
	width:100%;
	display: flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
}
.view_else1{
	width:100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height:70rpx;
	line-height: 70rpx;
}
.view_example{
	color:#007AFF;
	width:20%;
}
.view_img{
	padding:20rpx 20rpx 20rpx 30rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.uploadImg{
	width:200rpx;
	height:180rpx;
	border:1px dashed #CCCCCC;
	margin-right:15rpx;
}
.view_textarea{
	width:100%;
	padding:15rpx 15rpx 15rpx 15rpx;
}
.view_textarea textarea {
	width:93%;
	border:1px dashed #CCCCCC;
	min-height:200rpx;
	padding:10rpx 10rpx 10rpx 10rpx;
}
.ruleclass{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ruleclass checkbox-group{
	width:100%;
	text-align: center;
	height:50rpx;
	line-height: 50rpx;
}
.rule-text{
	color:#FFA200;
}
.jumpRule{
	color:#FFA200;
	height:50rpx;
	line-height: 50rpx;
	text-align: center;
}
.view_img{
	padding:20rpx 20rpx 20rpx 30rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.uploadImg{
	width:200rpx;
	height:180rpx;
	border:1px dashed #CCCCCC;
	margin-right:15rpx;
}
.imgContent{
	width:200rpx;
	height:180rpx;
	margin-right:15rpx;
}
.imgItem{
	width:100%;
	height:100%;
	border:1px dashed #CCCCCC;
}
.delete{
	position: relative;
    top: -25px;
	width:200rpx;
	background: #e60000;
	color:#fff;text-align: center;
}
</style>
